<template>
    <section id="type">
        <div class="nav">
            <router-link to="/type">
                <span class="left"></span>
            </router-link>
            <router-link to="/server" v-bind:class="'search'">
                <p>
                    <span></span>
                    <input type="text" :placeholder="txt" />
                </p>
            </router-link>
            <router-link to="/car1">
                <span class="right"></span>
            </router-link>
        </div>
        <div class="type">
            <mt-navbar v-model="selected">
                <mt-tab-item id="1">正在流行</mt-tab-item>
                <mt-tab-item id="2">上衣</mt-tab-item>
                <mt-tab-item id="3">裤子</mt-tab-item>
                <mt-tab-item id="4">裙子</mt-tab-item>
                <mt-tab-item id="5">内衣</mt-tab-item>
                <mt-tab-item id="6">女鞋</mt-tab-item>
                <mt-tab-item id="7">男友</mt-tab-item>
                <mt-tab-item id="8">包包</mt-tab-item>
                <mt-tab-item id="9">运动</mt-tab-item>
                <mt-tab-item id="10">配饰</mt-tab-item>
                <mt-tab-item id="11">美妆</mt-tab-item>
                <mt-tab-item id="12">个护</mt-tab-item>
                <mt-tab-item id="13">家居</mt-tab-item>
                <mt-tab-item id="14">百货</mt-tab-item>
                <mt-tab-item id="15">母婴</mt-tab-item>
                <mt-tab-item id="16">食品</mt-tab-item>
            </mt-navbar>

            <!-- tab-container -->
            <mt-tab-container v-model="selected">
                <mt-tab-container-item id="1">
                    <shop :data="popularShops"></shop>
                    <shopSelect :datas="popularList"></shopSelect>
                </mt-tab-container-item>
                <mt-tab-container-item id="2">
                    <shop :data="coats"></shop>
                    <shopSelect :datas="coatsList"></shopSelect>
                </mt-tab-container-item>
                <mt-tab-container-item id="3">
                    <shop :data="pants"></shop>
                    <shopSelect :datas="coatsList"></shopSelect>
                </mt-tab-container-item>
                <mt-tab-container-item id="4">
                    <shop :data="skirt"></shop>
                    <shopSelect :datas="coatsList"></shopSelect>
                </mt-tab-container-item>
                <mt-tab-container-item id="5">
                    <shop :data="underwear"></shop>
                    <shopSelect :datas="coatsList"></shopSelect>
                </mt-tab-container-item>
                <mt-tab-container-item id="6">
                    <shop :data="shoes"></shop>
                    <shopSelect :datas="coatsList"></shopSelect>
                </mt-tab-container-item>
                <mt-tab-container-item id="7">
                    <shop :data="boyfriend"></shop>
                    <shopSelect :datas="coatsList"></shopSelect>
                </mt-tab-container-item>
                <mt-tab-container-item id="8">
                    <shop :data="bag"></shop>
                    <shopSelect :datas="coatsList"></shopSelect>
                </mt-tab-container-item>
                <mt-tab-container-item id="9">
                    <shop :data="sport"></shop>
                    <shopSelect :datas="coatsList"></shopSelect>
                </mt-tab-container-item>
                <mt-tab-container-item id="10">
                    <shop :data="accessories"></shop>
                    <shopSelect :datas="coatsList"></shopSelect>
                </mt-tab-container-item>
                <mt-tab-container-item id="11">
                    <shop :data="makeup"></shop>
                    <shopSelect :datas="coatsList"></shopSelect>
                </mt-tab-container-item>
                <mt-tab-container-item id="12">
                    <shop :data="wash"></shop>
                    <shopSelect :datas="coatsList"></shopSelect>
                </mt-tab-container-item>
                <mt-tab-container-item id="13">
                    <shop :data="living"></shop>
                    <shopSelect :datas="coatsList"></shopSelect>
                </mt-tab-container-item>
                <mt-tab-container-item id="14">
                    <shop :data="store"></shop>
                    <shopSelect :datas="coatsList"></shopSelect>
                </mt-tab-container-item>
                <mt-tab-container-item id="15">
                    <shop :data="child"></shop>
                    <shopSelect :datas="coatsList"></shopSelect>
                </mt-tab-container-item>
                <mt-tab-container-item id="16">
                    <shop :data="food"></shop>
                    <shopSelect :datas="coatsList"></shopSelect>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
    </section>
</template>


<script>
import shop from "../type/shop";
import shopSelect from "../type/shopSelect";
import type from "../../assets/js/type";

export default {
    components: {
        shop,
        shopSelect
    },
    data() {
        return {
            txt: "",
            txtList: [],
            selected: "1",
            popularShops: [],
            coats: [],
            popularList: [],
            coatsList: [],
            pants:[],
            skirt:[],
            underwear:[],
            shoes:[],
            boyfriend:[],
            bag:[],
            sport:[],
            accessories:[],
            makeup:[],
            wash:[],
            living:[],
            store:[],
            child:[],
            food:[]
            };
    },
    mounted() {
        this.$http.get("./data/public.json").then(res => {
            this.txtList = res.data.content;
        });
        let timer = setInterval(() => {
            let num = parseInt(Math.random() * this.txtList.length);
            this.txt = this.txtList[num];
        }, 3000);
        this.$once("hook:beforeDestroy", () => {
            clearInterval(timer);
        });

        this.$http.get("./data/type.json").then(res => {
            this.popularShops =res.data.popularShop;
            this.coats = res.data.coat;
            this.popularList = res.data.popularList;
            this.coatsList = res.data.coatsList;
            this.pants = res.data.pants;
            this.skirt = res.data.skirt;
            this.underwear = res.data.underwear;
            this.shoes = res.data.shoes;
            this.boyfriend = res.data.boyfriend;
            this.bag = res.data.bag;
            this.sport = res.data.sport;
            this.accessories = res.data.accessories;
            this.makeup = res.data.makeup;
            this.wash = res.data.wash;
            this.living = res.data.living;
            this.store = res.data.store;
            this.child = res.data.child;
            this.foo = res.data.foo;
        }),
            type.toucnScroll();
    }
};
</script>

<style lang="scss">
$theme-color: #ff0176;
#type {
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        height: 30px;
        padding: 10px 0;
        justify-content: space-between;
        z-index: 12;
        background-color: white;
        .left,
        .right {
            display: inline-block;
            width: 22px;
            height: 100%;
            margin: 0 10px;
        }
        .left {
            background: url("../../assets/images/home-chat.png") no-repeat
                center;
            background-size: contain;
        }
        .right {
            background: url("../../assets/images/shopcar.png") no-repeat center;
            background-size: contain;
        }
        .search {
            flex: 1;
            width: auto;
            input::-webkit-input-placeholder {
                /*WebKit browsers*/
                font-size: 13px;
                color: rgb(170, 170, 170);
            }
        }
        p {
            display: flex;
            height: 100%;
            align-items: center;
            background-color: #eeeeee;
            span {
                width: 15px;
                height: 100%;
                margin: 0px 10px;
                background: url("../../assets/images/home-server.png") no-repeat
                    center/contain;
            }
            input {
                height: 15px;
                border: none;
                flex: 1;
                outline: none;
                background-color: #eeeeee;
            }
        }
        a {
            text-decoration: none;
        }
    }
    .type {
        display: flex;

        & > .mint-navbar {
            width: 25%;
            height: 100vh;
            display: block;
            background-color: #f6f6f6;
            position: fixed;
            top: 50px;
            left: 0;
            overflow:scroll;
            &::-webkit-scrollbar {display:none}
            & > .mint-tab-item {
                & > .mint-tab-item-label {
                    font-size: 14px;
                    color: rgb(68, 68, 68);
                }
            }

            & > .is-selected {
                border-bottom: none;
                background-color: white;
                & > .mint-tab-item-label {
                    color: $theme-color;
                    font-size: 15px;
                    font-weight: bold;
                    border-left: 2px solid $theme-color;
                }
            }
        }
        & > .mint-tab-container {
            width: 75%;
            margin-left: 25%;
        }
    }
    #shop-list {
        padding-bottom: 0px;
    }
    .mint-navbar {
        background-color: white;
        z-index: 999;
    }
}
</style>